<!--
 * @Author: @yzcheng
 * @Date: 2021-03-19 15:15:21
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-03-19 15:46:05
-->
<template>
  <el-dialog v-model="visible" title="选择目标环节">
    <el-card shadow="never" style="margin-bottom: 10px">
      选择项:
      <el-tag v-if="tag">{{ tag }}</el-tag>
    </el-card>
    <el-table
      ref="table"
      border
      :data="list"
      highlight-current-row
      @current-change="clickCurrentRow"
      max-height="150"
    >
      <el-table-column label="当前环节" prop="name"></el-table-column>
      <el-table-column label="分配人员" prop="assignee"></el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">
          {{ $dayjs.formateDate(scope.row.createTime, "YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间">
        <template #default="scope">
          {{ $dayjs.formateDate(scope.row.startTime, "YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="$emit('update:visible', false)">取消</el-button>
      <el-button @click="onOk">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { flowTrackByProcessInstanceId } from "../../../api/historyListApi";
import { filter, isEmpty } from "lodash";
export default {
  emits: ["update:visible", "update:target", "update:text"],
  props: {
    visible: {
      type: String,
      required: true,
    },
    target: {
      type: String,
      required: true,
    },
    proInsId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      selectedRow: "",
      tag: "",
      taskId: "",
      list: [],
    };
  },
  created() {
    // this.fetchTranceFlow();
  },
  methods: {
    async fetchTranceFlow() {
      try {
        const { data } = await flowTrackByProcessInstanceId(this.proInsId);
        this.list = filter(data, ({ endTime }) => !isEmpty(endTime));
      } catch (err) {
        console.error(err);
      }
    },
    clickCurrentRow({ name, taskDefinitionKey }) {
      this.tag = name;
      this.taskId = taskDefinitionKey;
    },
    onOk() {
      this.$emit("update:target", this.taskId);
      this.$emit("update:text", this.tag);
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style>
</style>
